<template>
  <section class="container">
    <div class="search-main mb20">
      <bk-input
        :clearable="true"
        v-model="value"
        :show-clear-only-hover="true"
        @clear="handleSearch"
        @enter="handleSearch"
      ></bk-input>
      <bk-button
        :theme="'primary'"
        :title="'主要按钮'"
        class="mr10"
        @click="handleSearch"
      >
        搜索
      </bk-button>
    </div>
    <div class="bk-layout-col" style="width: 100%">
      <bk-table :data="tableData" :max-height="520" ref="table">
        <bk-table-column label="名称" prop="name"></bk-table-column>
        <bk-table-column label="内网IP" prop="ip"></bk-table-column>

        <bk-table-column label="来源" prop="source"></bk-table-column>
        <bk-table-column label="状态" prop="status"></bk-table-column>
        <bk-table-column label="创建时间" prop="create_time"></bk-table-column>
      </bk-table>
      <bk-pagination
        class="mt20"
        :current.sync="defaultPaging.current"
        :count.sync="defaultPaging.count"
        :limit="defaultPaging.limit"
        @limit-change="handleLimitChange"
        @change="handlePageChange"
      >
      </bk-pagination>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      value: "",
      defaultPaging: {
        current: 1,
        limit: 10,
        count: 0,
      },
    };
  },
  computed: {},
  methods: {
    handleSearch() {
      this.defaultPaging.current = 1;
      this.getMagicTableData();
    },

    handleLimitChange(limit) {
      this.defaultPaging.current = 1;
      this.defaultPaging.limit = limit;
      this.getMagicTableData();
    },
    handlePageChange(page) {
      this.getMagicTableData();
    },
    getMagicTableData() {
      this.$store
        .dispatch("example/getMagicTableData", {
          page: this.defaultPaging.current,
          page_size: this.defaultPaging.limit,
          value: this.value,
        })
        .then((res) => {
          console.log(res, "---");
          this.tableData = res.data.list;
          this.defaultPaging.count = res.data.total;
        });
    },
  },
  created() {
    this.getMagicTableData();
  },
};
</script>
